<template>
  <div
    :id="'uiImage_' + info._id"
    :ref="info._id"
    v-ui-ref="vSetRef"
    class="overflow-x-hidden overflow-y-scroll scrollbar--light"
    :style="{ maxHeight: `${maxHeight}px` }"
  >
    <!-- <el-image
      v-if="info.extension.model.value"
      :fit="info.extension.fit.value"
      :preview-src-list="info.extension.bigImage.value.map((el) => el.value)"
      :src="info.extension.model.value"
      :style="{ width: `${info.extension.width.value}`, height: `${info.extension.height.value}` }"
    /> -->
    <div v-if="!hasPreview" :style="{ width: `${info.extension.width.value}`, height: `${info.extension.height.value}` }">
      <vui-icon icon="image-line" style="font-size: 80px" />
    </div>
    <div v-else class="flex flex-wrap w-full" @click="onClick">
      <template v-if="imgList.length > 0">
        <template v-for="(v, i) in imgList" :key="i">
          <el-image
            :fit="info.extension.fit.value"
            :preview-src-list="v.srcList ? v.srcList : []"
            :src="v.src"
            style="border-radius: 6px; margin: 0 8px 8px 0"
            :style="{ width: `${info.extension.width.value}`, height: `${info.extension.height.value}` }"
          />
        </template>
      </template>
      <el-image
        v-else-if="info.extension.backgroundSet?.value?.url"
        :fit="info.extension.fit.value"
        :src="info.extension.backgroundSet.value.url"
        style="border-radius: 6px; margin: 0 8px 8px 0"
        :style="{ width: `${info.extension.width.value}`, height: `${info.extension.height.value}` }"
      />
      <span v-else>{{ translateTitle('Ve.elements.暂无数据') }}</span>
    </div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import { replaseRegVariable } from '@ve/utils/utils'
  import { domHeight } from '@ve/utils/domHeight'
  export default defineComponent({
    name: 'UiImage',
    components: {},
    mixins: [UiMixin, RefsInjectMixin],
    data() {
      return { imgList: [], maxHeight: 200 }
    },
    computed: {
      getDataSource() {
        return this.info.dataSourceBind.sourceId
      },
    },
    mounted() {
      this.$sub(`SplitpaneResized_${this.previewPageId()}`, () => {
        this.getHeight()
      })
      this.$nextTick(() => {
        setTimeout(() => {
          this.getHeight()
        }, 500)
      })
      this.getBackgroundUrl()
    },
    methods: {
      translateTitle,
      async getBackgroundUrl() {
        if (this.info.extension.backgroundSet?.value?.FILE_SEQ) {
          let res = await request({
            url: GFCD('dams', 'domain') + GFCD('dams', 'baseUrl'),
            method: 'post',
            data: {
              data: JSON.stringify({ FILE_SEQ: this.info.extension.backgroundSet?.value?.FILE_SEQ, '#OUTPUT_TYPE#': 'base64' }),
              method: 'dams.file.common.download',
            },
            // responseType: 'blob',
          })
          console.log(res)
          this.info.extension.backgroundSet.value.url = `data:image/${res.data[0].FILE_SUFFIX};base64,${res.data[0].BASE64_STRING}`
        }
      },
      getHeight() {
        let _domHeight = domHeight(this)
        this.maxHeight = _domHeight
      },
      async requestData(fileSubList) {
        let res = await request({
          url: GFCD('dams', 'domain') + this.$store.getters['user/appCodeUrl'],
          method: 'post',
          data: {
            data: JSON.stringify({ FILE_SEQ: fileSubList, '#OUTPUT_TYPE#': 'base64' }),
            method: this.info.extension?.imgMethod?.value,
          },
          // responseType: 'blob',
        })
        this.imgList = []
        res.data.forEach((row) => {
          this.imgList.push({
            src: `data:image/${row.FILE_SUFFIX};base64,${row.BASE64_STRING}`,
            srcList: [`data:image/${row.FILE_SUFFIX};base64,${row.BASE64_STRING}`],
          })
        })
      },
      getImg(_data) {
        request({
          url: GFCD('dams', 'domain') + this.info.extension.api.value,
          method: 'post',
          data: {
            data: JSON.stringify(_data),
            method: this.info.extension.method.value,
          },
        }).then((res) => {
          let fileSubList = res.data[this.info.extension.method.value].data.map((el) => el.FILE_SEQ).join(',')
          if (!fileSubList) {
            this.imgList = []
            return
          }
          if (fileSubList && fileSubList.length > 0) this.requestData(fileSubList)
        })
      },
      getParameter(newVal) {
        let obj = {}
        // let selfFormData = this.vuiComponents[this.info.extension.getTableData.value[0]]?.self?.$getCheckboxOrRadioVals()
        // console.log('selfFormData======', selfFormData)
        // console.log(this.info.extension?.requestData?.value)
        this.info.extension?.requestData?.value.forEach((row) => {
          obj[row.key] = row.value
          if (/{[^#{]+}/g.test(row.value)) {
            obj[row.key] = replaseRegVariable(row.value, newVal)
          }
        })
        console.log(obj)
        return obj
      },
      $setUploadModel(obj) {
        console.log('UiImage=====', obj)
        let _data = this.getParameter(obj)
        this.getImg(_data)
      },
    },
  })
</script>
